import BaseComponent from "../../../pages/BaseComponent";
import "./index.less";
import {ScrollView, View} from "@tarojs/components";
import {observable} from "mobx";
import {inject, observer} from "mobx-react";

@inject('store')
@observer
export default class PickView extends BaseComponent {

  @observable scrollIntoViewId = "";
  @observable scrollRecordY = 0;
  scrollFlag = false;

  static defaultProps = {
    itemHeight: 30,
    unit: "单位",
    values: [],
    value: undefined,
    onSelect: undefined,
  };

  getTag() {
    return "PickView";
  }

  componentDidMount() {
    super.componentDidMount();

    const {itemHeight, unit, values, value} = this.props;
    if (!!value) {
      for (let i = 0; i < values.length; i++) {
        if (value == values[i]) {
          this.scrollIntoViewId = 's' + (i - 2);
          this.scrollRecordY = (i - 2) * itemHeight;
          break;
        }
      }
    }
  }

  onScroll = (e) => {
    if (this.scrollFlag) {
      this.scrollRecordY = e.detail.scrollTop;
      // if (this.scrollRecordY > itemHeight * 2) {
      //   if (this.scrollIntoViewId != "")
      //     this.scrollIntoViewId = "";
      // } else {
      //   this.scrollIntoViewId = 's' + Math.round(this.scrollRecordY / itemHeight);
      // }
      // console.log('onScroll', this.scrollRecordY, e.detail);
    }
  }

  onTouchStart = (e) => {
    console.log('onTouchStart', e)
    this.scrollIntoViewId = "";
    this.scrollFlag = true;
  }

  onTouchEnd = (e) => {
    const {itemHeight, values, onSelect} = this.props;

    let index = Math.round(this.scrollRecordY / itemHeight);
    this.scrollIntoViewId = 's' + index;
    console.log('onTouchEnd', this.scrollRecordY, this.scrollIntoViewId, e);
    this.scrollRecordY = Math.round(this.scrollRecordY / itemHeight) * itemHeight;
    this.scrollFlag = false;

    if (!!onSelect) {
      onSelect(values[index + 2]);
    }
  }

  render() {

    const Threshold = 20;

    const {itemHeight, unit, values, choseIndex} = this.props;

    const views = [];
    let str = '';
    let center = this.scrollRecordY + itemHeight * 2;
    for (let i = 0; i < values.length; i++) {
      let opacity = 1 - Math.abs(center - i * itemHeight) / (itemHeight * 3);
      if (opacity <= 0)
        opacity = 0.001;
      // opacity = 1;
      // 'A' + i + ':' + opacity

      views.push(
        <View id={'s' + i} className='item'
              style={{opacity: opacity, height: itemHeight, fontSize: (opacity * 30) + 'rpx', lineHeight: itemHeight+'px'}}>
          {values[i]}
        </View>
      );

      // str += '[' + i + ',' + opacity + '],';
    }
    // console.log(str);

    return (
      <View className='scroll_index' style={{height: itemHeight * 5}}>
        <ScrollView
          className='scrollview'
          scrollY
          scrollWithAnimation
          lowerThreshold={Threshold}
          upperThreshold={Threshold}
          onScroll={this.onScroll}
          scrollIntoView={this.scrollIntoViewId}
          onTouchStart={this.onTouchStart}
          onTouchEnd={this.onTouchEnd}
          style={{height: itemHeight * 5}}
        >
          {views}
        </ScrollView>

        <View className='mask' style={{top: -itemHeight * 3, height: itemHeight}}>
          <View className='unit'>{unit}</View>
        </View>
      </View>
    );
  }
}
